<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 400px;
            height: 200px;
            position: relative;
            /*img超出隐藏*/
            overflow: hidden;
        }
        .outer img{
            width: 400px;
            height: 200px;
            transition: 1s all;
        }
        /*遮罩，让mask改在outer上*/
        .mask{
            width: 400px;
            height: 200px;
            background-color: black;
            color: white;
            /*
            父容器设置 position: relative;相对定位
            子容器设置 position: absolute;绝对定位就会覆盖上一个兄弟
            */
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 200px;
            font-size: 100px;
            /*遮罩默认0，先让下面的图片显示*/
            opacity: 0;
            /*过渡时间1秒 所有属性 all不写也是所有*/
            transition: 1s all;
        }
        .outer:hover .mask{
            /*当鼠标移入的时候，遮罩显示*/
            opacity: 0.5;
        }
        .outer:hover img{
            /*先缩放在旋转*/
            transform: scale(1.6) rotate(200deg);
        }
    </style>
</head>
<body>
<div class="outer">
    <img src="../img/gd.webp">
    <div class="mask">上海</div>
</div>
</body>
</html>